/*
* @Date: 2021/3/27
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import ReactDOM from 'react-dom'
import './index.scss';
import Mask from "../../../components/Mask";
import Loading from '../../../components/Loading';
import Captcha from '../../../components/Captcha';
import { get, post } from '../../../utils/http';

class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
      captcha: '',
      errMsg: '',
      isloading: false,
      reset: Math.random(),
    }
  }

  onUserNameChange = (e) => {
    this.setState({
      username: e.target.value
    })
  }
  onPasswordChange = (e) => {
    this.setState({
      password: e.target.value
    })
  }
  onCaptchaChange = (val) => {
    this.setState({
      captcha: val
    })
  }
  onLogin = async (e) => {
    const { username, password, captcha } = this.state;
    this.setState({
      isloading: true,
    });
    const data = await post('/front/login', {
      username,
      password,
      captcha,
    });
    if (Number(data.code) === 0) {
      location.href = '/front/center';
    } else {
      this.setState({
        errMsg: data.msg,
        isloading: false,
        reset: Math.random(),
      });
    }
  }

  render() {
    let { isloading,errMsg, reset } = this.state;
    return (
      <div className="page">
        <Mask isShow={isloading}>
          <Loading isShow={isloading}/>
        </Mask>

        <div className = "login-panel">
          <div className = "login-box">
            <div className="login-title"><h3>登录</h3></div>
            <div className = "errMsg"
                 style={{display: errMsg !== undefined && errMsg !== '' ? 'block' : 'none'}}>{errMsg}</div>
            <div className="form-group">
              <label>用户名</label>
              <input type="text" className="form-control" placeholder="请输入用户名或者邮箱"
                     onChange={this.onUserNameChange}/>
            </div>
            <div className="form-group">
              <label>密码</label>
              <input type="password" className="form-control" placeholder="请输入密码"
                     onChange={this.onPasswordChange}/>
            </div>
            <Captcha onValueChange={this.onCaptchaChange} reset={reset}/>
            <div className="form-group">
              <button className="btn btn-primary btn-block" onClick={this.onLogin}>登录</button>
            </div>
            <div className="form-group row">
              <div className="col"><a href="#">忘记密码</a></div>
              <div className="col"><a href="/front/register">注册</a></div>
            </div>
          </div>

        </div>
      </div>
    )
  }
}
ReactDOM.render(
  <Page/>,
  document.getElementById('root')
)
